<!-- 业务 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 业务列表 -->
      <el-col :lg="24" :xs="24">
        <!-- <div class="search-container">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="关键字" prop="clientName">
              <el-input
                v-model="queryParams.clientName"
                placeholder="客户名称"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <i-ep-search />
                搜索
              </el-button>
              <el-button @click="handleResetQuery">
                <i-ep-refresh />
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div> -->

        <el-card shadow="never" class="table-container">
          <template #header>
            <div class="flex-x-between">
              <div>
                <el-button type="success" @click="handleOpenDialog()">
                  <i-ep-plus />
                  新增
                </el-button>
              </div>
            </div>
          </template>

          <el-table
            v-loading="loading"
            :data="pageData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              key="id"
              label="编号"
              align="center"
              prop="id"
              width="260"
            />
            <el-table-column
              key="categoryName"
              label="业务名称"
              align="center"
              prop="categoryName"
            />

            <!-- <el-table-column
              key="categoryNo"
              label="业务编号"
              align="center"
              prop="categoryNo"
            /> -->

            <el-table-column label="操作" fixed="right" width="160">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  link
                  @click="handleOpenDialog(scope.row)"
                >
                  <i-ep-edit />
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  link
                  size="small"
                  @click="handleDelete(scope.row.id)"
                >
                  <i-ep-delete />
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.current"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 业务表单弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="500px"
      @close="handleCloseDialog"
    >
      <el-form
        ref="userFormRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="业务名称" prop="categoryName">
          <el-input
            v-model="formData.categoryName"
            placeholder="请输入业务名称"
          />
        </el-form-item>

        <!-- <el-form-item label="业务编号" prop="categoryNo">
          <el-input
            v-model="formData.categoryNo"
            placeholder="请输入业务编号"
          />
        </el-form-item> -->
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Customers",
  inheritAttrs: false,
});

import bussinessAPI, { BussinessForm, BussinessVO } from "@/api/business";

const queryFormRef = ref(ElForm);
const userFormRef = ref(ElForm);

const loading = ref(false);
const removeIds = ref([]);
const total = ref(0);
const pageData = ref<BussinessVO[]>();
/** 业务查询参数  */
const queryParams = reactive({
  current: 1,
  pageSize: 10,
  cityNo: "",
  lawFirmId: undefined,
  lawyerId: undefined,
  clientName: "",
});

/**  业务弹窗对象  */
const dialog = reactive({
  visible: false,
  title: "",
});

// 业务表单数据
const formData = reactive<BussinessForm>({
  categoryName: "",
  id: undefined,
  categoryNo: "",
});

/** 业务表单校验规则  */
const rules = reactive({
  categoryName: [
    { required: true, message: "业务名称不能为空", trigger: "blur" },
  ],
});

/** 查询 */
function handleQuery() {
  loading.value = true;
  bussinessAPI
    .getBussiness()
    .then((data) => {
      console.log(data, "业务列表");
      pageData.value = data;
      total.value = data.length;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function handleResetQuery() {
  // queryFormRef.value.resetFields();
  queryParams.current = 1;
  handleQuery();
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/**
 * 打开弹窗
 *
 * @param id 业务ID
 */
async function handleOpenDialog(val?: any) {
  dialog.visible = true;
  console.log(val, "val");
  if (val) {
    dialog.title = "修改业务";
    // clientAPI.getFormData(id).then((data) => {
    //   Object.assign(formData, { ...data });
    // });
    formData.categoryName = val.categoryName;
    formData.id = val.id;
  } else {
    dialog.title = "新增业务";
  }
}

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
  userFormRef.value.resetFields();
  userFormRef.value.clearValidate();
  formData.id = undefined;
  formData.categoryName = "";
}

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      const userId = formData.id;
      loading.value = true;
      bussinessAPI
        .updateBussiness(formData)
        .then(() => {
          if (userId) {
            ElMessage.success("修改业务成功");
          } else {
            ElMessage.success("新增业务成功");
          }
          handleCloseDialog();
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    }
  });
}, 3000);

/** 删除业务 */
function handleDelete(id?: number) {
  const userIds = [id || removeIds.value].join(",");

  ElMessageBox.confirm("确认删除业务?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    function () {
      loading.value = true;
      bussinessAPI
        .deleteBussiness(userIds)
        .then(() => {
          ElMessage.success("删除成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    function () {
      ElMessage.info("已取消删除");
    }
  );
}

onMounted(() => {
  handleQuery();
});
</script>
